<!DOCTYPE html>
<html lang="zh-cn"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head th:replace="common::head"></head>
<body>
<div th:replace="common::top"></div>
<br/>
<h2>编辑订单</h2>
<table>
    <tr>
        <td><b>客户:</b></td>
        <td th:text="${order.customName}" colspan="5"></td>
    </tr>
    <tr>
        <td><b>编码:</b></td>
        <td th:text="${order.code}"></td>
        <td colspan="2"></td>
        <td><b>订单总量:</b></td>
        <td th:text="${order.orderNum}"></td>
    </tr>
    <tr>
        <td><b>状态:</b></td>
        <td th:text="${order.status}==1?'正常':'撤销'"></td>
        <td><b>已上产线:</b></td>
        <td th:text="${order.confirm}?'是':'否'"></td>
        <td><b>生产总量:</b></td>
        <td th:text="${order.produceNum}"></td>
    </tr>
    <tr>
        <td><b>合同金额:</b></td>
        <td th:text="${order.contractAmount}/100"></td>
        <td><b>销售:</b></td>
        <td th:text="${order.createUser}"></td>
        <td><b>发送总量:</b></td>
        <td th:text="${order.sendNum}"></td>
    </tr>
    <tr>
        <td><b>实收金额:</b></td>
        <td th:text="${order.actualAmount}/100"></td>
        <td><b>创建时间:</b></td>
        <td th:text="${#dates.format(order.createTime,'yyyy-MM-dd')}"></td>
        <td><b>退货总量:</b></td>
        <td th:text="${order.refundNum}"></td>
    </tr>
</table>
<br/>
<form th:action="@{edit}" method="post" id="editForm">
<!--    <div style="text-align:left; margin-left:55px;">-->
<!--        <li th:text="'编号: ' + ${order.code}"></li>-->
<!--        <li th:text="'客户: ' + ${order.customName} "></li>-->
<!--        <li th:text="'编码: ' + ${order.code}"></li>-->
<!--        <li th:text="'销售: ' + ${order.createUser}"></li>-->
<!--        <li th:text="'创建时间: ' + ${order.createTime}"></li>-->
        <input type="number" name="id" th:value="${order.id}" hidden>
<!--    </div>-->

    <table>
        <thead>
        <tr>
            <th>序号</th>
            <th>产品</th>
            <th>数量</th>
            <th>已发</th>
<!--            <th>缺口</th>-->
            <th>单价</th>
            <th>合计</th>
            <th>备注</th>
<!--            <th>备齐</th>-->
            <th>缺少</th>
        </tr>
        </thead>
        <tbody id="batch">
        <tr th:each="item : ${batchList}">
            <td style="display:none"><input type="number" th:value="${item.id}"></td>
            <td th:text="${itemStat.index+1}"></td>
            <td th:text="${item.productName}"></td>
            <td th:text="${item.orderNum}"></td>
            <td th:text="${item.sendNum}"></td>
<!--            <td th:text="${item.sendGap}"></td>-->
            <td><input type="number" step="0.01" th:value="${item.price} / 100" required style="width:70px;"></td>
            <td th:text="${item.amount} / 100"></td>
            <td th:text="${item.remark}"></td>
<!--            <td th:text="${item.produceGap}==0 ? '√':'×' "></td>-->
            <td th:text="${item.sendGap}" th:style="${item.produceGap}==0 ? 'color:green':'color:red' "></td>
        </tr>
        </tbody>
    </table>

    <input type="submit" value="更新" style="width: 220px;">
</form>

<p>
    <a href="javascript:history.back(-1);">上一页</a>
    <a href="../index.html" th:href="@{/index.html}">主页</a>
</p>

<script>
    $("#editForm").submit(function(e){
        e.preventDefault();

        var arr = [];
        $("#batch tr").each(function(){
            var obj = {};
            obj.price = $(this).find("td:eq(5) input").val()*100;
            obj.id = $(this).find("td:eq(0) input").val();
            arr.push(obj);
        });

        $.ajax({
            type: $("#editForm").attr("method"),
            url: $("#editForm").attr("action"),
            data: $("#editForm").serialize() + '&batchJson=' + JSON.stringify(arr) ,
            success: function(response){
                alert("提交成功");
                window.location.reload();
            },
            error: function(response){
                alert("提交失败");
            }
        });
    });
</script>
</body>
</html>